<template>
  <div class="shop">
    <div class="shop-scroll">
      <!-- 商家名称 -->
      <div class="shop-name">
        <h3 class="fis-title">{{ shopInfo.name }}</h3>
        <div class="shop-star">
          <van-rate
            v-model="shopInfo.score"
            allow-half
            :size="16"
            color="#ffd21e"
            void-icon="star"
            void-color="#eee"
          />
          <div class="sell-count">
            <span>(100)</span> 月售{{ shopInfo.sellCount }}单
          </div>
          <div class="add-shop">
            <van-icon name="like" size="16" />已收藏
          </div>
        </div>
      </div>
      <!-- 配送相关 -->
      <div class="to-meals">
        <div>
          <p>起送价</p>
          <p class="to-price">
            <span>{{ shopInfo.minPrice }}</span
            >元
          </p>
        </div>
        <div>
          <p>商家配送</p>
          <p class="to-price">
            <span>{{ shopInfo.deliveryPrice }}</span
            >元
          </p>
        </div>
        <div>
          <p>平均配送时间</p>
          <p class="to-price">
            <span>{{ shopInfo.deliveryTime }}</span
            >分钟
          </p>
        </div>
      </div>
      <!-- 公告与活动 -->
      <div class="shop-notice">
        <h3 class="title">公告与活动</h3>
        <p class="detail">{{ shopInfo.bulletin }}</p>
        <p>
          <van-tag color="#333" text-color="#fff">惠</van-tag>
          {{ shopInfo.supports[0] }}
        </p>
        <p><van-tag type="primary">折</van-tag> {{ shopInfo.supports[1] }}</p>
        <p><van-tag type="primary">折</van-tag> {{ shopInfo.supports[2] }}</p>
      </div>
      <!-- 商家实景 -->
      <div class="shop-scene">
        <h3 class="title">商家实景</h3>
        <div class="shop-pic">
          <img
            v-for="(item, index) in shopInfo.pics"
            :src="item"
            :key="index"
            @load="refresh"
          />
        </div>
      </div>
      <!-- 商家信息 -->
      <div class="shop-info">
        <h3>商家信息</h3>
        <div>
          <p>该商家支持开发票，请在下单时填写好发票抬头</p>
          <p>品类: 其他菜系，包子粥店</p>
          <p>地址: 重庆市渝北区大竹林街道</p>
          <p>营业时间: 8: 00 至 23: 00 </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      shopScroll: null, // 商家面板
    };
  },
  methods: {
    refresh() {
      this.shopScroll && this.shopScroll.refresh();
    },
  },
  computed: {
    ...mapState(["shopInfo"]),
  },
  created() {
    this.$nextTick(() => {
      this.shopScroll = new BScroll(".shop", {
        click: true,
      });
    });
  },
};
</script>

<style lang="less" scoped>
.shop {
  width: 100%;
  height: calc(72vh - 44px);
  overflow: hidden;
  .shop-scroll {
    padding: 20px;
    .shop-name {
      border-bottom: 1px solid #ccc;
      .fis-title {
        font-size: 20px;
      }
      .shop-star {
        display: flex;
        justify-content: space-between;
        color: #858585;
        padding: 15px 0 20px;
        .sell-count {
          margin-left: -60px;
          span {
            display: inline-block;
            margin-right: 16px;
          }
        }
        .add-shop {
          position: relative;
          .van-icon {
            position: absolute;
            right: 50%;
            top: -100%;
            transform: translate(50%);
            color: #e54226;
          }
        }
      }
    }
    .to-meals {
      display: flex;
      justify-content: space-between;
      padding: 20px 0;
      color: #a0a0a0;
      font-size: 14px;
      div {
        text-align: center;
        .to-price {
          color: #000;
          span {
            font-size: 18px;
          }
        }
      }
    }
    .shop-notice {
      margin: 0 0 10px;
      .title {
        font-size: 14px;
      }
      .detail {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
        padding: 10px;
        text-indent: 24px;
        line-height: 20px;
      }
      p {
        margin: 10px 0;
      }
      .detail {
        margin: 0 0;
      }
    }
    .shop-scene {
      .title {
        font-size: 14px;
        padding: 10px 0;
      }
      .shop-pic {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        border-bottom: 1px solid #bbb;
        box-sizing: border-box;
        img {
          width: calc(50% - 20px);
          margin-bottom: 20px;
        }
      }
    }
    .shop-info {
      padding: 20px 20px 0;
      box-sizing: border-box;
      h3 {
        font-size: 14px;
        padding-bottom: 10px
      }
      div {
        box-sizing: border-box;
        p {
          border-top: 1px solid #bbb;
          padding: 10px 10px;
          color: #858585;
        }
      }
    }
  }
}
</style>